<template>
  <el-container class="main_con">
    <div class="filter_con ds_block">
      <h1>基本信息</h1>
      <el-form class="form_box" ref="MerchantListRef" :model="MerchantList" label-width="80px" :rules="MerchantListRules">
        <el-form-item label="Logo">
          <div class="upload_img"><Upload :tempUrl="MerchantList.logo" @input="getLogoImg"></Upload></div>
        </el-form-item>
        <el-form-item label="名称" prop="name"><el-input v-model="MerchantList.name" placeholder="请输入名称"></el-input></el-form-item>
        <el-form-item label="移动电话" prop="mobile"><el-input v-model="MerchantList.mobile" placeholder="请输入移动电话"></el-input></el-form-item>
        <el-form-item label="备注"><el-input v-model="MerchantList.remark" placeholder="请输入备注"></el-input></el-form-item>
        <el-form-item label="营业执照">
          <div class="upload_business_license"><Upload :tempUrl="MerchantList.business_license" @input="getBusinessLicense"></Upload></div>
        </el-form-item>
        <div>
          <el-form-item label="客户服务">
            <el-radio-group v-model="MerchantList.customer_service_type">
              <div style="display: flex; margin-top: 10px">
                <el-radio :label="1">官方客服</el-radio>
                <div >
                  <el-radio :label="2">联系手机</el-radio>
                  <el-radio :label="3">客服二维码</el-radio>
                  <el-radio :label="4" v-has='22'>微信客服</el-radio>
                </div>
              </div>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="MerchantList.customer_service_type == 2" prop="customer_service_mobile">
            <el-input v-model="newlist.customer_service_mobile" placeholder="请输入客服联系电话"></el-input>
          </el-form-item>
          <el-form-item v-if="MerchantList.customer_service_type == 3"><UploadMulti :obj="newlist" mykey="imgArrList"></UploadMulti></el-form-item>
          <el-form-item v-has='22' v-if="MerchantList.customer_service_type == 4" label="选择客服">
            <el-button size="mini" v-if="selectMer.length == 0" @click="showSelectH">选择客服</el-button>
            <el-button size="mini" v-if="selectMer.length > 0" @click="showSelectH">{{ selectMer[0].name }}</el-button>
          </el-form-item>
        </div>
        <el-form-item label="详细介绍"><el-input class="aaa" type="textarea" v-model="MerchantList.content"></el-input></el-form-item>
        <el-form-item class="form_buttom_box"><el-button v-has type="primary" @click="putMerchantLister()">保存</el-button></el-form-item>
      </el-form>
    </div>
    <el-dialog title="选择客服" :visible.sync="showSelect" width="50%" append-to-body><SelectCustomer :key="rk" :data="selectMer" @outData="closePro"></SelectCustomer></el-dialog>
  </el-container>
</template>

<script>
import UploadMulti from '@/components/Upload/uploadMulti';
import {getMerchantList, putMerchantList} from '@/api/shop/information';
import Upload from '@/components/Upload/SingleImage2';
import {getToken} from '@/utils/auth';
import {geturl} from '@/api/common';
import SelectCustomer from '@/components/SelectCustomer/index';
export default {
  data() {
    return {
      showSelect: false,
      rk: 1,
      selectMer: [],
      MerchantList: {
        mobile: '',
        business_license: '',
        address: '',
        logo: '',
        content: '',
        customer_service_type: 1,

        customerService: ''
      },
      MerchantListRules: {
        name: [{required: true, message: '请输入名称', trigger: 'blur'}],
        mobile: [
          {
            required: true,
            message: '请输入移动电话',
            trigger: 'blur'
          },
          {
            pattern: /^1[23456789]\d{9}$/,
            message: '手机号码格式不正确',
            trigger: 'blur'
          }
        ]
      },
      dialogImageUrl: '',
      dialogVisible: false,
      headers: {},
      url: process.env.VUE_APP_BASE_API,
      geturl: '',
      newlist: {
        imgArrList: [],
        rets: [],
        customer_service_mobile: ''
      }
    };
  },
  mounted() {
    // 获取列表
    this.getMerchantLister();
    // 获取token值
    this.geturl = geturl();
    this.headers['Authorization'] = getToken();
  },
  components: {
    Upload,
    UploadMulti,
    SelectCustomer
  },
  methods: {
    showSelectH() {
      this.showSelect = true;
    },
    // 获取列表
    getMerchantLister() {
      getMerchantList().then(res => {
        if (res.msg.customer_service_type == 3) {
          this.newlist.imgArrList = [];
          this.newlist.rets = [];

          res.msg.customerService.forEach(item => {
            this.newlist.imgArrList.push({url: item});
          });
        }
        if (res.msg.customer_service_type == 2) {
          this.newlist.customer_service_mobile = res.msg.customerService;
        }
        if (res.msg.customer_service_type == 4) {
          let wx_customer = JSON.parse(res.msg.wx_customer);
          this.selectMer.push(wx_customer);
        }
        this.MerchantList = res.msg;
      });
    },
    // 图片上传
    getLogoImg(data) {
      this.MerchantList.logo = data;
    },
    getBusinessLicense(data) {
      this.MerchantList.business_license = data;
    },
    // 照片集
    handleRemove(file, fileList) {
      this.imgArrList = fileList;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    OnSuccess(res, file, fileList) {
      this.imgArrList = fileList;
    },
    // 提交
    putMerchantLister() {
      if (this.MerchantList.customer_service_type == 3) {
        this.newlist.imgArrList.forEach(item => {
          this.newlist.rets.push(item.url);
        });
      }
      let data = {
        ...this.MerchantList,
        customer_service_mobile: this.newlist.customer_service_mobile,
        images: this.newlist.rets
      };
      if (this.MerchantList.customer_service_type == 4) {
        let wx_customer = this.selectMer[0];
        data.wx_customer = {
          id: wx_customer.id,
          name: wx_customer.name,
          url: wx_customer.url,
          corp_id: wx_customer.corp_id
        };
        data.wx_customer = JSON.stringify(data.wx_customer);
      }
      if (this.MerchantList.customer_service_type !== 3) {
        delete data.images;
      }
      if (this.MerchantList.customer_service_type !== 2) {
        delete data.customer_service_mobile;
      }

      putMerchantList(data).then(res => {
        this.$message.success('修改成功！');
        // this.$router.go(0);
      });
    },

    // 重置
    ResetMerchantLister() {
      this.getMerchantLister();
    },
    close() {
      this.MerchantList = {
        mobile: '',
        business_license: '',
        address: '',
        logo: '',
        content: ''
      };
    },
    closePro(list) {
      console.log(list);
      this.showSelect = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.main_con {
  h1 {
    margin: 0.67em 0.35em;
  }
  /deep/ .form_box {
    .el-input__inner {
      width: 300px;
    }
    .el-textarea__inner {
      width: 450px;
    }
    .upload_img {
      width: 150px;
    }
    .upload_business_license {
      width: 300px;
    }
    .form_buttom_box {
      .el-button {
        width: 150px;
        height: 40px;
      }
    }
  }
}
</style>
